<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WebSocket</title>
    <link rel="stylesheet" href="/ws/style/main.css" />
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>

  <body>
    <div id="app">
      <div class="chat">
        <div>
          <button @click="start">连接</button>
        </div>
        <div class="count">{{ws.userName}}</div>
        <div id="output">
          <div
            class="msg-box"
            v-for="(msg,i) in ws.messages"
            :key="i"
            v-if="msg.msg"
          >
            <div
              class="msg"
              :class="{ismine:msg.is_self}"
              v-if="msg.action=='allUser'"
            >
              <span class="user-name">
                {{msg.from.name}}
              </span>
              <div class="bubbles">
                <span>{{msg.msg}}</span>
              </div>
            </div>
            <div class="notify" v-if="msg.action=='SystemNotify'">
              {{(msg.from && msg.from.name||"" )+" "+ msg.msg}}
            </div>
          </div>
        </div>
        <div class="fake-input">
          <input type="text" id="input" v-model="val" placeholder="请输入" />
          <button @click="send">发送</button>
        </div>
      </div>

      <div class="other">
        <h1>hello world!</h1>

        在线用户 当前共：{{ws.count}}人
        <div class="users">
          <span v-for="(user,i) in ws.onlineUser" :key="i"
            >{{user.name}}，</span
          >
        </div>
      </div>
    </div>

    <script src="/ws/script/websocket.js"></script>
    <script src="/ws/script/app.js"></script>
  </body>
</html>
